<template>
  <div class="homepage">
    <myHead></myHead>

    <!-- 轮播 -->
    <van-swipe
      class="my-swipe animated bounce"
      lazy-render
      :autoplay="3000"
      indicator-color="white"
    >
      <van-swipe-item class="animated bounce" v-for="(l, i) in images" :key="i">
        <van-image
          class="bannerItem animated bounce"
          show-error
          show-loading
          lazy-load
          :src="l"
        ></van-image>
      </van-swipe-item>
    </van-swipe>
    <!-- 轮播结束 -->

    <!-- 实战推荐 -->
    <section>
      <div class="contentTitle flex">
        <h3>实战推荐</h3>
        <router-link to="class">查看更多<van-icon name="arrow" /></router-link>
      </div>

      <ul v-if="codingList" class="pracCont">
        <li @click="goDetail" v-for="(l, i) in codingList" :key="i">
          <van-image class="c-img" :src="l.img" />
          <div class="middle">
            <p class="item-name">{{ l.title }}</p>
            <p class="item-info">
              <span>{{ l.level }}</span
              ><b> · </b
              ><span><van-icon name="user-o"></van-icon>{{ l.buyPeople }}</span>
            </p>
          </div>
          <p class="price">￥{{ l.price }}</p>
        </li>
      </ul>
    </section>
    <!-- 实战推荐结束 -->
  </div>
</template>

<style lang="scss" scoped>
.pracCont {
  li {
    display: flex;
    margin-top: 16px;
    .c-img {
      border-radius: 10px;
      overflow: hidden;
      width: 90px;
      height: 62px;
    }
    .middle {
      margin-top: 5px;
      margin-left: 10px;
      margin-right: 10px;
      width: 157px;

      .item-name {
        font-weight: 500;
        font-size: 15px;
        color: #2b333b;
        line-height: 1.3;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
        word-wrap: break-word;
      }
      .item-info {
        margin-top: 0.10666667rem;
        font-size: 0.32rem;
        color: #71777d;
        line-height: 0.45333333rem;
      }
    }
    .price {
      width: 72px;
      height: 32px;
      background: rgba(43, 51, 59, 0.06);
      border-radius: 16px;
      font-weight: 500;
      font-size: 12px;
      color: #71777d;
      text-align: center;
      line-height: 32px;
      transform: translateY(50%);
    }
  }
}
.contentTitle {
  justify-content: space-between;
  h3 {
    font-weight: 700;
    font-size: 18px;
  }
  a {
    color: #71777d;
    font-size: 12px;
  }
}
.bannerItem {
  transform: scale(0.9);
  border-radius: 20px;
  overflow: hidden;
}
.my-swipe {
  background-color: #f5f4f0;
  position: relative;
  z-index: 2;
}
</style>
<script>
export default {
  data() {
    return {
      images: [
        "https://img4.mukewang.com/6035c5f909f31cde18000600.png",
        "https://img.mukewang.com/602c5498094d056418000600.png",
        "https://img.mukewang.com/5fdb17b4092f88ae18000600.png",
      ],
      codingList: [],
      axios: {
        "id|+1": 1, //生成课程id，自增1
        title: "@ctitle(15)", //生成课程名
        "price|199-1000": 199, //随机生成课程价格 在30-1000之间
        img: "@Image('90x62','#6ff','#f7f0d4','阿哲')", //生成随机图片，大小/背景色/字体颜色/文字信息
        "level|1": ["高阶", "进阶"], //等级是数组中的一个
        "buyPeople|100-999": 100,
      },
    };
  },
  created() {
    this.$axios
      .post("/homepage/coding", { body: this.axios })
      .then((res) => {
        console.log(res);
        this.codingList = res.data[" data"];
        console.log(res.data);
      })
      .catch((err) => {
        console.log(err);
      });
  },
  methods: {
    goDetail() {
      this.$router.push({ name: "detail" });
    },
  },
};
</script>